<template>
    <div style="width: 100%;height:100%" class="dateBox" id="dateBox" :style="{fontSize: `${fontsize}px`}" >
        <div class="ldNum date">{{dateStr}}</div>
        <div class="info">
            <div class="infoText">
                <div>{{ sunInfo }}</div>
                <div class="tt">+{{ sunTime }}</div>
            </div>
            <div class="infoText">
                <div>{{ moonInfo }}</div>
                <div class="tt">+{{ moonTime }}</div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { getMoonTime, getSunTicks } from '../api';
import type { Setting } from '../App.vue';
dayjs.locale('zh-cn');
dayjs.extend(utc)
dayjs.extend(timezone)

const props = defineProps<{
    setting: Setting
}>();

const second2Time = (sec: number)=>{
    // 将秒数转为 HH:mm:ss字符串，正的加"+"，负的加"-"
    sec = Math.abs(sec);
    const hours = Math.floor(sec / 3600);
    const minutes = Math.floor((sec % 3600) / 60);
    const seconds = sec % 60;
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

}
const dateStr = ref('');
const sunTime = ref('');
const moonTime = ref('');
const sunInfo = ref('')
const moonInfo = ref('');

const setDate = () =>{
    const now = dayjs().tz('Asia/Shanghai');
    dateStr.value = now.format('YYYY年MM月DD日 dddd');
}

const setInfo = ()=>{
    const now = dayjs();
    const sunTicks = getSunTicks(props.setting.latitude, props.setting.longitude, now.toDate());

    for (const tick of sunTicks) {
        if (tick.name == 'sunrise'){
            if (now.isBefore(dayjs(tick.time))) {
                const dt = dayjs(tick.time).diff(now, 'second');
                sunTime.value = second2Time(dt)
                sunInfo.value = '日出';
                break;
            }
        }
        if (tick.name == 'sunset') {
            if (now.isBefore(dayjs(tick.time))) {
                const dt = dayjs(tick.time).diff(now, 'second');
                sunTime.value = second2Time(dt);
                sunInfo.value = '日落';
                break;
            }
            else{
                // 获取明天日出时间
                const nextSunTicks = getSunTicks(props.setting.latitude, props.setting.longitude, now.add(1, 'day').toDate());
                for (const nextTick of nextSunTicks) {
                    if (nextTick.name == 'sunrise') {
                        const dt = dayjs(nextTick.time).diff(now, 'second');
                        sunTime.value = second2Time(dt);
                        sunInfo.value = '日出';
                        break;
                    }
                }

            }
        }
    }

    const moonTicks = getMoonTime(props.setting.latitude, props.setting.longitude, now.toDate());

    if(now.isBefore(dayjs(moonTicks.rise))) {
        const dt = dayjs(moonTicks.rise).diff(now, 'second');
        moonTime.value = second2Time(dt);
        moonInfo.value = '月出';
    } else if (now.isBefore(dayjs(moonTicks.set))) {
        const dt = dayjs(moonTicks.set).diff(now, 'second');
        moonTime.value = second2Time(dt);
        moonInfo.value = '月落';
    } else {
        // 获取明天月出时间
        const nextMoonTicks = getMoonTime(props.setting.latitude, props.setting.longitude, now.add(1, 'day').toDate());
        const dt = dayjs(nextMoonTicks.rise).diff(now, 'second');
        moonTime.value = second2Time(dt);
        moonInfo.value = '月出';
    }
}


const fontsize = ref(10);

const setSize = ()=>{
    const width = document.getElementById('dateBox')?.clientWidth;
    if(width) {
        fontsize.value = width / 40;
    }
}

let timer = 0;
let obs: ResizeObserver;


const update = () => {
    const now = new Date();
    // 整点更新日期
    if (now.getSeconds() == 0 && now.getMinutes() == 0) {
        setDate();
    }
    setInfo();
};

onMounted(() => {
    update();
    timer = window.setInterval(update, props.setting.clockInterval * 1000);
    setDate();

    setSize();
    obs = new ResizeObserver(setSize);
    obs.observe(document.getElementById('dateBox') as Element);
});

watch(() => props.setting, () => {
    if (timer) {
        clearInterval(timer);
    }
    update();
    timer = window.setInterval(update, props.setting.clockInterval * 1000);
}, { deep: true, immediate: true});

onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
    }
    obs.disconnect();
});

</script>

<style scoped>

.dateBox {
    color: #c9c9c9;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.date{
    letter-spacing: 0.05em;
    font-size: 3em;
}
.info{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 0.1em;
    color: #818181;
}
.infoText {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    gap: 0.1em;
}
.tt{
    font-size: 1em;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .dateBox{
        margin-bottom: 2em;
    }
}
</style>